<template>
  <!-- 订单支付详情 -->
  <section>
    <div style="border-bottom:1px solid #eee;padding-bottom:10px;">
      <el-page-header @back="goBack" content="账单详情"></el-page-header>
    </div>
    <br />
    <div class="visit_detail_box">
      <div class="userinfo p-sm">
        <p v-if="detail">
          <img v-if="detail.head!=''" :src="detail.head | imageUrl" class="patient_img" alt />
          <img v-else src="/img/unknown-avatar.4f0c79ac.png" class="patient_img" alt />
        </p>
        <p v-if="detail">
          <span style="font-size: 20px; margin-right: 20px; vertical-align: middle;">{{detail.name}}</span>
          <i class="glyphicon glyphicon-earphone" style="vertical-align: middle; font-size: 18px;"></i>
        </p>
        <div v-if="detail" class="user-field">
          <span>性别：</span>
          {{detail.sex | toSex}}
        </div>
        <div v-if="detail" class="user-field">
          <span>年龄：</span>
          <!-- <label v-if="detail.age>7">{{detail.age}}岁</label>
          <label v-if="detail.age<7">{{detail.age}}岁{{detail.sdfMonth}}月{{detail.sdfDay}}天</label>-->
          <label v-if="detail.age>17">{{detail.age}}</label>
          <label v-else>{{detail.birthday|toTimeContrast}}</label>
        </div>
        <div v-if="detail" class="user-field">
          <span>就诊号：</span>
          <span style="color: red;">{{detail.archivesCode}}</span>
        </div>
      </div>
      <div class="user-content p-sm">
        <el-row style="margin:10px 0px;display:inline-block;width:100%;">
          <el-col :span="6">
            <label style="font-size:16px;">收费项目</label>
          </el-col>
          <el-col style="height:10px;" :span="6"></el-col>
          <el-col style="height:10px;" :span="6"></el-col>
          <!-- <el-col style="height:10px;" :span="6">
            <el-button style="float:right;" @click="$router.push({path:'/page/chargeIndex'})">返回</el-button>
          </el-col>-->
        </el-row>
        <el-row style="margin:10px 0px;">
          <el-col :span="4">收费科室：{{curInfo.deptName}}</el-col>
          <el-col :span="4">收费医生：{{curInfo.doctorName}}</el-col>
          <el-col :span="4">退费人员：{{curInfo.operateName}}</el-col>
          <el-col :span="6">收费时间：{{curInfo.payTime}}</el-col>
          <el-col :span="6">退费时间：{{curInfo.refundTime}}</el-col>
        </el-row>
        <el-row style="margin:10px 0px;">
          <el-col :span="24">退费原因：{{curInfo.remark}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <table class="table-box">
              <thead>
                <tr>
                  <th>收费名称</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>单位</th>
                  <th>折扣</th>
                  <th>是否套餐抵扣</th>
                  <th>核销数量</th>
                  <th>金额</th>
                  <th>退费金额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in itemList" :key="index">
                  <template v-if="item.source !='13'">
                    <td>{{item.sourceName}}</td>
                    <td>￥{{item.unitPrice!=undefined?item.unitPrice:item.oneMoney }}</td>
                    <td>{{item.number?item.number:item.frequency}}</td>
                    <td>{{item.unitName}}</td>
                    <td>
                      {{item.discount}}折
                    </td>
                    <td style="text-align:center;">{{item.packageWriteOff==0?"否":"是"}}</td>
                    <td style="text-align:center;">{{item.packageWriteOffNumber}}</td>
                    <td>
                      ￥{{item.actualAmount}}
                    </td>
                    <td>
                      ￥{{item.refundAmount}}
                    </td>
                  </template>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>
        <el-row v-if="tsList.length>0" class="moeny_box" style="margin-top:10px;">
          <el-col class="other" style="height:20px;font-size:16px;margin:5px 0;" :span="24">特殊收费项目</el-col>
          <el-col :span="24">
            <table class="table-box">
              <thead>
                <tr>
                  <th>收费名称</th>
                  <th>原价</th>
                  <th>数量</th>
                  <th>优惠价</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(it,index) in tsList" :key="index">
                  <td>{{it.sourceName}}</td>
                  <td>￥{{it.totalAmount}}</td>
                  <td>{{it.number}}</td>
                  <td>￥{{it.actualAmount}}</td>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>
        <el-row class="money_box">
          <el-col class="other" :span="18"></el-col>
          <el-col class="money" :span="6">
            <label>实收金额：</label>
            <span>￥{{total | changeMoneyToTwo}}</span>
          </el-col>
        </el-row>
        <el-row class="money_box">
          <el-col class="other" :span="18"></el-col>
          <el-col class="money" :span="6">
            <label>退费金额：</label>
            <span>￥{{totalMoney | changeMoneyToTwo}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px;">
          <el-button style="float:right;margin-right:10px;" @click="doPrint()">打印</el-button>
        </el-row>
      </div>
       <iframe v-if="showOrder" frameborder="0" height="0px" width="0px" ref="iframe" src="/print/returnrecipe.html"></iframe>
    </div>
  </section>
</template>
<script>
import calculate from '../_js/calculate'
export default {
  name: "chargeDetail",
  data() {
    return {
      detail: "",
      itemList:[],
      tsList:[],
      btnLoading:false,
      totalMoney:0,
      total:0,
      disAmount:0,
      curInfo:{
        deptName:'',
        doctorName:'',
        operateName:'',
        refundTime:'',
        payTime:'',
        balance:0,
        remark:''
      },
      showOrder:false
    };
  },
  created() {
  },
  mounted() {
    this.getBasic();
    this.findUsUserById();
    this.getItemDetail();
  },
  methods: {
    getItemDetail() {
      let id = this.$route.query.id;
      this.$api.getOrderRefundDetail({ refundId: id }).then((res) => {
        if (res.executed) {
          const { list , refundTime , deptName , doctorName , operateName , totalAmount , actualAmount ,payTime,remark}=res.dataBody;
          this.curInfo={
            refundTime , deptName , doctorName , operateName ,payTime,
            remark
          }
          this.itemList=list.filter(it=>{
             if(it.source!=13){
               return it;
             }
          })
          this.tsList=list.filter(it=>{
             if(it.source==13){
               return it;
             }
          })
          this.totalMoney=totalAmount;
          this.total=actualAmount;
          this.disAmount=Number(totalAmount - actualAmount).toFixed(2);
        }
      });
    },
    //获取患者详情
    findUsUserById() {
      let uid = this.$route.query.patientId;
      this.showLoading();
      this.$api
        .getThePatientLibraryById({ patientId: uid, hpId: this.adminUser.hpId })
        .then((res) => {
          if (res.executed) {
            this.detail = res.thePatientLibraryDetail;
            this.showLoading(false);
          } else {
            this.showLoading(false);
            this.$message.error(res.message);
          }
        });
    },
    getBasic() {
      let th = this;
      th.getCommonConfigByKey("药品剂量单位").then((res) => {
        th.dwList = res;
      });
    },
    goBack() {
      this.$router.push({
        path: "/page/chargeIndexV2",
        query: this.getUrlToken({
          // total: th.totalMoney,
          type: 3,
        }),
      });
    },
    doPrint() {
      this.showOrder = true;
      this.showLoading();
      setTimeout(()=> {
        this.iframeContent = this.$refs["iframe"].contentWindow;
        const {name,archivesCode, age ,sex,birthday,idCard}=this.detail;
        this.iframeContent.postMessage(
          {
            cmd: "postJson",
            params: JSON.stringify({
              detail:{
                name:name,
                sex:sex,
                age:age,
                idCard:idCard,
                birthday:birthday,
                archivesCode:archivesCode
              },
              list: [...this.itemList,...this.tsList],
              doctor:this.curInfo.doctorName,
              dept: this.curInfo.deptName,
              logo: this.adminUser.printLogo,
              total: this.totalMoney.toFixed(2),
              jmMoney:Number(this.totalMoney - this.total).toFixed(2),
              disAmount:this.total.toFixed(2),//折扣后金额
              memberName: this.curInfo.operateName,
              refundTime:this.curInfo.refundTime?this.curInfo.refundTime.substring(0,10):'',
              endTime:this.curInfo.payTime?this.curInfo.payTime.substring(0,10):'',
              hospitalName: this.adminUser.hospitalName
            }),
          },
          "*"
        );
      }, 500);
      setTimeout(()=> {
        this.showLoading(false);
      }, 2000);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../_css/detail.scss";
.patient_img {
  border: 1px solid #ddd;
  border-radius: 5px;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.durg_title {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.money_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  .other {
    height: 10px;
    display: inline-block;
  }
  .money {
    text-align: right;
    padding-right: 10px;
    display: inline-block;
  }
}
.printOrder {
  display: inline-block;
  width: 100%;
}
</style>

